<template>
  <div class="overflow-hidden">
    <!-- Hero Section -->
    <section class="relative min-h-screen bg-gradient-to-b from-gray-900 to-blue-900">
      <div class="absolute inset-0 overflow-hidden">
        <TechBackground class="mix-blend-screen" />
      </div>
      
      <div class="absolute inset-0 z-0">
        <div class="parallax-bg absolute inset-0" data-speed="0.05">
          <img
            src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072"
            alt="Hero Background"
            class="w-full h-full object-cover opacity-50"
          >
        </div>
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900/80 via-blue-800/60 to-transparent"></div>
        <div class="absolute inset-0 bg-pattern opacity-10"></div>
      </div>
      
      <div class="container relative z-10 mx-auto px-4 h-screen flex items-center">
        <div class="max-w-4xl">
          <!-- 添加打字机效果 -->
          <div class="mb-4 text-blue-400 font-mono">
            <TypeWriter
              :text="['创新科技', '智能未来', '数字转型']"
              :delay="2000"
              class="text-xl"
            />
          </div>
          
          <h1 class="parallax-text text-7xl md:text-8xl font-bold mb-8 leading-tight" data-speed="-0.05">
            <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-200">
              {{ homeData.hero.title }}
            </span>
          </h1>
          <p class="parallax-text text-xl md:text-2xl text-gray-200 mb-12 max-w-2xl" data-speed="-0.03">
            {{ homeData.hero.subtitle }}
          </p>
          <div class="parallax-text flex gap-6" data-speed="-0.02">
            <button 
              @click="handleContact" 
              class="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-all duration-300 group backdrop-blur-sm"
            >
              联系我们
              <span class="group-hover:translate-x-1 inline-block transition-transform duration-300">→</span>
            </button>
            <button 
              @click="handleLearnMore" 
              class="inline-flex items-center px-6 py-3 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all duration-300 backdrop-blur-md"
            >
              了解更多
              <span class="group-hover:translate-x-1 inline-block transition-transform duration-300">→</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 成就统计 -->
      <div id="achievements-section" class="relative w-full bg-gradient-to-t from-white dark:from-gray-900 to-transparent mt-auto">
        <div class="container mx-auto px-4 py-12 md:py-16">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
            <div 
              v-for="achievement in homeData.achievements" 
              :key="achievement.label"
              class="fade-in-section text-center p-6 rounded-lg bg-white/90 dark:bg-white/5 backdrop-blur-sm shadow-lg border border-gray-100 dark:border-white/10"
            >
              <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">{{ achievement.number }}</div>
              <div class="text-gray-600 dark:text-gray-300">{{ achievement.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="relative py-16 md:py-32 bg-gradient-to-b from-white via-white to-gray-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
      <div class="container mx-auto px-4">
        <div class="text-center mb-20">
          <span class="inline-block text-blue-600 dark:text-blue-400 font-semibold mb-4 tracking-wide uppercase text-sm">为什么选择我们</span>
          <h2 class="section-title text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">
            引领创新 <br class="hidden md:block">
            <span class="text-blue-600 dark:text-blue-400">驱动未来</span>
          </h2>
          <p class="section-subtitle text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
            我们提供全方位的技术支持和创新解决方案，助力企业实现数字化转型
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
          <div
            v-for="(feature, index) in homeData.features"
            :key="feature.title"
            class="feature-card group fade-in-section"
            :style="{ '--delay': `${index * 0.1}s` }"
          >
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl border border-gray-100 dark:border-gray-700 overflow-hidden transform transition-all duration-500">
              <div class="relative h-64 overflow-hidden">
                <img 
                  :src="feature.image"
                  :alt="feature.title"
                  class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </div>
              <div class="p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm">
                <div class="flex items-center mb-4">
                  <div class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 mr-4">
                    <img :src="feature.icon" :alt="feature.title" class="w-6 h-6">
                  </div>
                  <h3 class="text-2xl font-bold text-gray-800 dark:text-white">{{ feature.title }}</h3>
                </div>
                <p class="text-gray-700 dark:text-gray-300 leading-relaxed">{{ feature.description }}</p>
                <div class="mt-6 flex items-center text-blue-600 dark:text-blue-400 font-medium hover:text-blue-700 dark:hover:text-blue-300">
                  了解更多
                  <span class="ml-2 transform group-hover:translate-x-1 transition-transform duration-300">→</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="relative py-32 bg-blue-50 dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="text-center mb-20">
          <span class="inline-block text-blue-600 dark:text-blue-400 font-semibold mb-4 tracking-wide uppercase text-sm">我们的服务</span>
          <h2 class="section-title text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">
            专业服务，<span class="text-blue-600 dark:text-blue-400">品质保证</span>
          </h2>
          <p class="section-subtitle text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
            为您提供全方位的技术服务支持，助力企业数字化转型
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div
            v-for="(service, index) in homeData.services"
            :key="service.title"
            class="service-card group fade-in-section"
            :style="{ '--delay': `${index * 0.1}s` }"
          >
            <div class="bg-white dark:bg-gray-700 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300">
              <div class="w-16 h-16 rounded-2xl bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center mb-6">
                <img :src="service.icon" :alt="service.title" class="w-8 h-8">
              </div>
              <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">{{ service.title }}</h3>
              <p class="text-gray-700 dark:text-gray-300 mb-6">{{ service.description }}</p>
              <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:text-blue-700 dark:hover:text-blue-300">
                了解更多
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Tech Stack Section -->
    <section id="tech-stack-section" class="relative py-32 bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900">
      <div class="container mx-auto px-4">
        <div class="text-center mb-20">
          <span class="inline-block text-blue-600 dark:text-blue-400 font-semibold mb-4 tracking-wide uppercase text-sm">技术栈</span>
          <h2 class="section-title text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">
            先进技术，<span class="text-blue-600 dark:text-blue-400">强大支持</span>
          </h2>
          <p class="section-subtitle text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
            采用业界领先的技术栈，为您的项目提供可靠的技术支持
          </p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
          <div
            v-for="(tech, index) in homeData.techStack"
            :key="tech.name"
            class="tech-card group fade-in-section"
            :style="{ '--delay': `${index * 0.1}s` }"
          >
            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 text-center">
              <img :src="tech.icon" :alt="tech.name" class="w-16 h-16 mx-auto mb-4">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">{{ tech.name }}</h3>
              <p class="text-sm text-gray-700 dark:text-gray-300">{{ tech.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject } from 'vue'
import { homeData } from '@/composables/data/pageData'
import TechBackground from '@/components/TechBackground.vue'
import TypeWriter from '@/components/TypeWriter.vue'

// 注入dialog方法
const dialog = inject('dialog')

const handleContact = async () => {
  try {
    await dialog.open('contact')
  } catch (err) {
    // 用户取消或关闭对话框
  }
}

const handleLearnMore = async () => {
  try {
    const message = homeData.features
      .map(feature => `${feature.title}：\n${feature.description}`)
      .join('\n\n')
    
    await dialog.open('demo', {
      title: '我们的优势',
      message: message
    })
  } catch (err) {
    // 用户取消或关闭对话框
  }
}

onMounted(() => {
  // 初始化观察者
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible')
      }
    })
  }, {
    threshold: 0.1
  })

  // 观察所有需要淡入的元素
  document.querySelectorAll('.fade-in-section').forEach(el => {
    observer.observe(el)
  })
})
</script>

<style scoped>
/* 基础动画样式 */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay, 0s);
}

/* 视差效果 */
.parallax-text {
  transition: transform 0.2s ease-out;
}

/* 背景图案 */
.bg-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.btn-primary {
  @apply px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply px-8 py-3 bg-white/10 text-white rounded-full font-medium hover:bg-white/20 transition-all duration-300 border border-white/20;
}

.section-title {
  @apply bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent;
}
</style>